<template>
  <div>
    <h5>reactive</h5>
     <p>单独使用reactive</p>
    <button @click="add">{{ state.num1 }}</button>
    <hr>
    <p>reactive，ref解构</p>
     <button @click="inc">{{ state2.num2 }}</button>
  </div>
</template>
<script setup>
import { reactive,ref } from "vue";
const state = reactive({
  num1: 0,
});
//这样子赋值不用加 .value
const add = () => {
  state.num1++;
};


const num2 = ref(10)
const state2 = reactive({
  num2
})

const inc = ()=>{
  state2.num2 --;
}

</script>